import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Image, Input } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
import PicItem from '../../components/item/picItem'
import Dialog from '../../components/login'
import { post } from '../../service/api'
import './index.scss'

class Mine extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      current: 0,
      tabList: [{ title: '卡券' }, { title: '搜藏' }],
      isShowDialog: false,
      userInfo: [],
      user: false,
      list: [],
      login: false,
      padding: true,
      cardInfo: []
    }
  }
  config = {
    navigationBarTitleText: '我的',
  }
  async getUserInfo() {
    const res = await Taro.getUserInfo();
    this.setState({
      userInfo: res.userInfo
    })
  }
  async getLoginUser() {
    const { data } = await post('pserson/getLoginUser');
    if (data.code == 0) {
      this.setState({
        user: true
      })
    } else {
      this.setState({
        user: false
      })
    }
  }
  async getList() {
    const { data } = await post('favorite/findPage');
    if (data.code == 0) {
      this.setState({
        list: data.rows,
        login: true
      })
    }
  }
  async cardFind() {
    const { data } = await post('vipCard/find');
    if (data.code == 0) {
      if (data.vip) {
        this.setState({
          cardInfo: data.vip
        })
      }
    }
  }
  handleTab(value) {
    this.setState({
      current: value
    })
  }
  handleDialog() {
    this.setState({
      isShowDialog: false
    })
  }
  isShowLogin() {
    if (!this.state.user) {
      this.setState({
        isShowDialog: true
      })
    }

  }
  goPageAddCare() {
    Taro.navigateTo({ url: "/pages/addCare/index" })
  }
  goPageCaredetail() {
    Taro.navigateTo({ url: "/pages/caredetail/index" })
  }
  toPageCollect() {
    Taro.navigateTo({ url: "/pages/collect/index" })
  }
  toPagePhone() {
    Taro.navigateTo({ url: "/pages/phoneLogin/index" })
  }
  toPageWx() {
    Taro.navigateTo({ url: "/pages/passLogin/index" })
  }
  componentDidShow() {
    this.getLoginUser()
    this.getList()
    this.cardFind()
    this.getUserInfo()
  }
  render() {
    const { current, tabList, userInfo, user, list, login, padding, cardInfo } = this.state;
    return (
      <View className='h-mine'>
        <View className="mine-head" onClick={this.isShowLogin.bind(this)}>
          <View className="mine-name">{user ? userInfo.nickName : '请先登录/注册'}</View>
          {
            user && <Image className="mine-logo" src={userInfo.avatarUrl} />
          }
          {
            !user && <Image className="mine-logo" src={require('../../asset/imgs/user-logo.png')} />
          }
        </View>

        <View className="mine-body">
          <AtTabs current={current} tabList={tabList} onClick={this.handleTab.bind(this)}>
            <AtTabsPane current={current} index={0} >
              <scroll-view scroll-y style="height: 100%;padding-top:32rpx;">
                {!login && <View className="hint-txt top2">请登录~</View>}
                {login && <View className="select-one">
                  {
                    cardInfo.vipCode && <View className="my-care">
                      <Image onClick={this.goPageCaredetail.bind(this)} className="my-care-img" src={require('../../asset/imgs/care1.png')} />
                      <View className="code">NO.{cardInfo.vipCode}</View>
                    </View>
                  }

                  <View className="add-care" onClick={this.goPageAddCare.bind(this)}>+ 添加新卡片</View>
                </View>}
              </scroll-view>
            </AtTabsPane>
            <AtTabsPane current={current} index={1}>

              <scroll-view scroll-y style="height:100%;" className="tab2">
                {
                  !login && <View className="hint-txt">请登录~</View>
                }
                {
                  login && <View>
                    <PicItem list={list} padding={padding} />
                  </View>
                }
              </scroll-view>
            </AtTabsPane>
          </AtTabs>
        </View>
        {isShowDialog && <Dialog title="请先登录" onHandleDialog={this.handleDialog} />}
        {current && login && <View className="manage-wrap" onClick={this.toPageCollect}>
          <View className="manage-btn">管理</View>
        </View>}
      </View>
    )
  }
}

export default Mine
